<template>
  <a-form class="listSearchWrap table-page-search-wrapper" layout="vertical">
    <a-row :gutter="16">
      <a-col
        :xs="24"
        :sm="12"
        :md="7"
        :lg="5"
        :xl="5"
        :xxl="4">
        <a-form-item :label="$t('policyName')">
          <a-input
            v-model.trim="queryParams.name"
            @change="$emit('change', queryParams)"
            :placeholder="$t('pleaseInput') + $t('policyName').toLowerCase()"
            @keyup.enter="handleSearch"
            allowClear
          />
        </a-form-item>
      </a-col>
      <!-- <a-col
        :xs="24"
        :sm="12"
        :md="7"
        :lg="5"
        :xl="5"
        :xxl="4">
        <a-form-item :label="$t('policyStatus')">
          <a-select
              mode="multiple"
              :maxTagCount="1"
              allow-clear
              v-model="queryParams.status"
              :placeholder="$t('pleaseSelect') + $t('policyStatus').toLowerCase()"
            >
              <a-select-option v-for="(item, index) in strategyStatusArr" :key="index" :value="item.value" >
                {{ item.name }}
              </a-select-option>
            </a-select>
        </a-form-item>
      </a-col> -->
      <a-col
        :xs="24"
        :sm="12"
        :md="6"
        :lg="5"
        :xl="5"
        :xxl="4">
        <a-form-item :label="$t('creator')">
           <a-select
              mode="multiple"
              :maxTagCount="1"
              allow-clear
              v-model="queryParams.createBy"
              @change="changeCheckContion"
               :filter-option="filterOption"
              :placeholder="$t('pleaseSelect') + $t('creator').toLowerCase()"
            >
              <a-select-option v-for="(item, index) in createdUsers" :key="index" :value="item.id" >
                {{ item.name }}
              </a-select-option>
            </a-select>
          <!-- <common-select
            :options="createdUsers"
           
            v-model="queryParams.createBy"
            :allow-clear="true"
            mode="multiple"
            :maxTagCount="1"
            :placeholder="$t('pleaseSelect') + $t('creator').toLowerCase()"
            @changeoption="changeOption($event, 'createBy')"
          ></common-select> -->
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="11"
        :lg="8"
        :xl="8"
        :xxl="8">
        <div class="searchBtns" style="margin-top:22px">
          <a-button-group>
            <auth-button type="primary" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <!-- <a-button @click="clearCondition"> -->
            <a-button @click="doAction('clearCondition')">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <auth-button :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.add" @click="handleAdd" v-if="!queryParams.fromGcy">
            <i class="iconfont icon-xinjian"></i> {{ $t('strategy') }}
          </auth-button>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import PartSelect from '@/views/components/PartSelect'
import { strategyPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    CommonSelect,
    PartSelect,
    AuthButton
  },
  props: {
    time: {
      type: Number,
      default: 789145
    },
    versionType: {
      type: String,
      default: ''
    },
    upgradeTriggerType: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => {
        return  {}
      }
    }
  },
  computed: {
    queryParams:{
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);    // 触发
      }
    }
  },
  model: {
    prop: "value", //绑定的值，通过父组件传递
    event: "change" //自定义事件名
  },
  data () {
    return {
      strategyPerms,
      createdUsers: [],
      strategyStatusArr: []
    }
  },
  watch:{
    // queryParams(val){
    //
    //   this.$emit('change', val);    // 触发
    // }
  },
  mounted () {
    this.getData()
  },
  methods: {
    changeCheckContion(val,option){
      this.$emit('change', this.queryParams);  
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    doAction (key, data) {
      if (this[key]) {
        this[key](data || null)
        return
      }
      this.$emit('clickbtn', { type: key, data })
    },
    handleSearch () {
      // this.$emit('clickbtn', { type: 'searchData', data: true })
      this.$emit('change', this.queryParams)
    },
    handleAdd () {
      this.$emit('clickbtn', { type: 'addStrategy' })
    },
    changeOption (data, key) {
      this.queryParams[key] = data
      this.$emit('change', this.queryParams);    // 触发
    },
    changeType (data) {
      const arr = (data + '').split('')
      this.queryParams.taskType = arr[0] * 1
      this.queryParams.type = arr[1] * 1
      this.$emit('change', this.queryParams);    // 触发
      // this.$emit('clickbtn', { type: 'searchData' })
    },
    clearCondition () {
      this.$store.commit('resetStrategyQueryParams')
      this.$set(this.queryParams,'name','')
      this.$set(this.queryParams,'status',undefined)
      this.$set(this.queryParams,'createBy',undefined)
      this.$emit('change', this.queryParams);    // 触发
    },
    getData () {
      this.getCreatedUsersData()
    },
    getCreatedUsersData () {
      this.$store.dispatch('getCreatedStrategyUsersData', { type: 2 , versionType:this.versionType, upgradeTriggerType:this.upgradeTriggerType}).then((res) => {
        this.createdUsers = res.data.map((item) => {
          return {
            id: item.userId,
            name: item.account
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>